/**
 * 自适应宽度构造器
 *
 * @time 2022-4-8
 * @author sunjianlei
 */
import { ref } from 'vue';
import { useDebounceFn, tryOnUnmounted } from '@vueuse/core';
import { useEventListener } from '/@/hooks/event/useEventListener';
// key = js运算符+数字
const defWidthConfig = {
    '<=565': '100%',
    '<=1366': '800px',
    '<=1600': '600px',
    '<=1920': '600px',
    '>1920': '500px',
};
/**
 * 自适应宽度
 *
 * @param widthConfig 宽度配置，可参考 defWidthConfig 配置
 * @param assign 是否合并默认配置
 * @param debounce 去抖毫秒数
 */
export function useAdaptiveWidth(widthConfig = defWidthConfig, assign = true, debounce = 50) {
    const widthConfigAssign = assign ? Object.assign({}, defWidthConfig, widthConfig) : widthConfig;
    const configKeys = Object.keys(widthConfigAssign);
    const adaptiveWidth = ref();
    /**
     * 进行计算宽度
     * @param innerWidth
     */
    function calcWidth(innerWidth) {
        let width;
        for (const key of configKeys) {
            try {
                // 通过js运算
                let flag = new Function(`return ${innerWidth} ${key}`)();
                if (flag) {
                    width = widthConfigAssign[key];
                    break;
                }
            }
            catch (e) {
                console.error(e);
            }
        }
        if (width) {
            adaptiveWidth.value = width;
        }
        else {
            console.warn('没有找到匹配的自适应宽度');
        }
    }
    // 初始计算
    calcWidth(window.innerWidth);
    // 监听 resize 事件
    const { removeEvent } = useEventListener({
        el: window,
        name: 'resize',
        listener: useDebounceFn(() => calcWidth(window.innerWidth), debounce),
    });
    // 卸载组件时取消监听事件
    tryOnUnmounted(() => removeEvent());
    return { adaptiveWidth };
}
/**
 * 抽屉自适应宽度
 */
export function useDrawerAdaptiveWidth() {
    return useAdaptiveWidth({
        '<=620': '100%',
        '<=1600': 600,
        '<=1920': 650,
        '>1920': 700,
    }, false);
}
